<template>
	<view>
		<view class="grid-box">
			<u-grid></u-grid>
		</view>
		<view class="navigation">
			<van-cell
				class="navigation-cell"
			  is-link
				@click="handleWeather"
			>
				<view slot="title">
				  <view class="cell-text">今日天气</view>
					<view>
						<img class="weather" src="../../static/images/weather.png" alt="">
						<span style="color: #4CD964;">{{mapInfo.liveData.weather}}</span>
						<view class="weather-text" v-if="mapInfo">
							<view>{{mapInfo.city.text}}: {{mapInfo.city.data}}</view>
							<view>{{mapInfo.temperature.text}}: {{mapInfo.temperature.data}}℃</view>
						</view>
					</view>
				</view>
			</van-cell>
		</view>
	</view>
</template>

<script>
	// 引入高德sdk
	import amap from '@/static/libs/amap-wx.js'
	
	export default {
		data() {
			return {
				mapInfo: null,
				qqmapsdk: null
			}
		},
		onLoad() {

		},
		methods: {
			//获取天气信息
			getWeatherInfo() {
				let that = this
				let myAmapFun = new amap.AMapWX({key: "2cb026a5d337127af8fa5924ed363c53"});
				myAmapFun.getWeather({
					success: function(data){
						that.mapInfo = data
						console.log(data)
						//成功回调
					},
					fail: function(info){
						//失败回调
						console.log(info)
					}
				})
			},
			
			//跳转到天气页面
			handleWeather() {
				let url = "/pages/weather/weather?mapInfo=" + JSON.stringify(this.mapInfo)
				uni.navigateTo({    
						url  
				})   
			}
		},
		onLoad() {
			this.getWeatherInfo()
		}
	}
</script>

<style lang="scss">
	.grid-box{
		margin-bottom: 20rpx;
	}
	.navigation{
		margin-top: 20rpx;
		.navigation-cell{
			.cell-text{
				font-size: 14px;
			}
			.weather{
				width: 100rpx;
				height: 100rpx;
				float: left;
			}
			.weather-text{
				float: right;
			}
		}
	}
	
</style>
